<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>报名点新增</title>
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <link href="../../static/css/style.css" rel="stylesheet">
    <script src="../../static/js/jquery.min.js"></script>
    <script src="../../static/js/jquery.cookie.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../static/js/base.js"></script>
    <script src="../../static/js/ax.js"></script>
    <script src="../../static/js/avalon.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="../../static/js/html5.js"></script>
    <script src="../../static/js/respond.js"></script>
    <![endif]-->

</head>

<body class="bg_w">

    <div class="layui-fluid" ms-controller="test">
        <div class="layui-card-body">
            <form class="layui-form layui-form-pane" action="" lay-filter="component-form-element">
                <h5 class="lheight">上级机构</h5>
                <div class="layui-row layui-col-space10">
                    <div class="layui-inline layui-col-lg3 layui-col-sm6">
                        <label class="layui-form-label" style="width: 150px;">总校</label>
                        <div class="layui-input-block" style="margin-left: 150px;">
                            <!-- <select id="gatherSchoolId" ms-duplex="@registInfo.gatherSchoolId"  name="gatherSchoolId">

                                    <option value="">请选择</option>
                                    <option ms-attr="{value: el.id}" ms-for="($index, el) in @gatherlist">{{el.name}}</option>
                       
                            </select> -->

                            <input type="text" ms-duplex="@gatherlist.name" readonly class="layui-input">
                            <input ms-duplex="@gatherlist.id" name="gatherSchoolId" type="hidden" class="layui-input" id="name">

                        </div>
                    </div>
                    <div class="layui-inline layui-col-lg3 layui-col-sm6">
                        <label class="layui-form-label" style="width: 150px;">分校</label>
                        <div class="layui-input-block" style="margin-left: 150px;">
                            <select id="branchSchoolId" name="branchSchoolId" ms-duplex="@registInfo.branchSchoolId">
                                <option value="">请选择</option>
                                <option ms-attr="{value: el.id}" ms-for="($index, el) in @byGatherlist">{{el.name}}</option>
                            </select>
                        </div>
                    </div>


                </div>

                <div class="layui-row layui-col-space10">
                    <div class="layui-inline  layui-col-sm6">
                        <label class="layui-form-label" style="width: 150px;">报名点名称</label>
                        <div class="layui-input-block" style="margin-left: 150px;">
                            <input type="text" ms-duplex="@registInfo.name" name="name" lay-verify="required|name" class="layui-input" id="name">
                            <input type="hidden" ms-duplex="@registInfo.id" name="id" class="layui-input" id="id">
                        </div>
                    </div>
                    <div class="layui-col-sm6">
                        <h6 class="pleft17 lheight">报名点名称，汉字+字母+数字，100字符内</h6>
                    </div>
                </div>


                <div class="layui-row layui-col-space10">
                    <div class="layui-inline  layui-col-sm6">
                        <label class="layui-form-label" style="width: 150px;">报名点地址</label>
                        <div class="layui-input-block" style="margin-left: 150px;">
                            <input type="text" ms-duplex="@registInfo.address" name="address" lay-verify="required" class="layui-input" id="address">
                        </div>
                    </div>
                    <div class="layui-col-sm6">
                        <label class="layui-form-label" style="width: 150px;">经纬度</label>
                        <div class="layui-input-block" style="position: relative;margin-left: 150px;">
                            <input type="text" id="lonandlat" ms-duplex="@registInfo.lonandlat" readonly="readonly" name="lonandlat" lay-verify="required"
                                placeholder="" autocomplete="off" class="layui-input" style=" margin-right: 10px; float: left;">
                            <input id="searchButton" type="button" class="layui-btn add_btn" value="搜索" style="position: absolute; right: 0;" />
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space10">
                    <div class="layui-inline  layui-col-sm6">
                        <label class="layui-form-label" style="width: 150px;">联系人电话</label>
                        <div class="layui-input-block" style="margin-left: 150px;">
                            <input type="text" name="mobile" ms-duplex="@registInfo.mobile" lay-verify="required|phone" class="layui-input" id="mobile">
                        </div>
                    </div>
                    <div class="layui-col-sm6">
                        <label class="layui-form-label" style="width: 150px;">联系人</label>
                        <div class="layui-input-block" style="position: relative;margin-left: 150px;">
                            <input type="text" name="contacts" ms-duplex="@registInfo.contacts" id="contacts" lay-verify="required" placeholder="" autocomplete="off"
                                class="layui-input" style=" margin-right: 10px; float: left;">
                        </div>
                    </div>
                </div>

                <!--模板-->


                <div class="layui-form-item layui-col-space10">
                    <div class="layui-input-block">
                        <a id="btnClose" class="layui-btn layui-btn-primary btn-left">关闭</a>
                        <button class="layui-btn btn-left add_btn" lay-submit lay-filter="component-form-element">提交</button>

                    </div>
                </div>
            </form>
        </div>
    </div>


</body>

<script>
    var table;
    var form;

    var vm = avalon.define({
        $id: "test",
        regId: '',
        gathrid: '',
        registInfo: [],
        gatherlist: [],
        byGatherlist: [],

        // 获取总校
        getGather: function () {
            ax.get({
                url: schoolWebUrl + '/api/gather/getGather',
                contentType: "application/x-www-form-urlencoded",
                data: "",
                success: function (r) {
                    vm.gatherlist = r.data
                    vm.gathrid = r.data.id;
                    vm.gebyGatherlist()

                }
            })
        },
        // 获取分校
        gebyGatherlist: function () {
            ax.post({
                type: 'POST',
                url: schoolWebUrl + '/api/branch/getInfoByGather',
                contentType: "application/x-www-form-urlencoded",
                data: { "id": vm.gathrid },
                success: function (r) {
                    vm.byGatherlist = r.data;
                    vm.getregistInfo();
                },
            });
        },
        // 获取详情信息
        getregistInfo() {
            var postData = { "id": getQueryString("id") }
            vm.regId = getQueryString("id");
            ax.get({
                type: 'POST',
                url: schoolWebUrl + '/api/register/info',
                contentType: "application/x-www-form-urlencoded",
                data: postData,
                success: function (r) {
                    var data = r.data;
                    $("#lonandlat").val(data.latitude+','+data.longitude);
                    vm.registInfo = data;
                    setTimeout(function () {
                        form.render('select');
                    }, 200)
                },
            });
        }

    });

    vm.$watch('onReady', function () {

        vm.getGather();

    })







    layui.use(['table', 'form', 'laydate', 'layer', 'upload'], function () {
        table = layui.table;
        form = layui.form;
        var laydate = layui.laydate,
            layer = layui.layer,
            $ = layui.jquery,
            upload = layui.upload;

        //常规用法
        laydate.render({
            elem: '#activeTime'
            , range: true
        });



        //地址失去焦点事件
        $("#address").blur(function () {
            var address = $("#address").val();
            $.ajax({
                type: 'get',
                url: ' https://restapi.amap.com/v3/geocode/geo?key=930ccb3f2c1982cbfbe33c328869ae40&address=' + address,
                success: function (r) {
                    if (r.geocodes[0] === "[]" || r.geocodes[0] == undefined) {
                        layer.msg("地址输入错误请重新输入");
                        return;
                    } else {
                        $("#lonandlat").val(r.geocodes[0].location);
                    }
                }
            });
        });

        /*
                //搜索地址
                $("#searchButton").onclick(function(){
                    var address= $("#address").val();
                    $.ajax({
                        type:'get',
                        url:' https://restapi.amap.com/v3/geocode/geo?key=930ccb3f2c1982cbfbe33c328869ae40&address='+address,
                        success: function (r) {
                            if(r.geocodes[0].location==""||r.geocodes[0].location==undefined){
                                layer.alert("地址输入错误请重新输入");
                                return;
                            }else{
                                $("#lonandlat").val(r.geocodes[0].location);
                            }
                        }
                    });
                });*/

        //添加验证规则
        form.verify({
            name: [
                /^[a-zA-Z0-9\u4e00-\u9fa5]{1,100}$/,
                '报名点名称必须是汉字+字母+数字，100字符内'
            ],
        });

        //监听提交
        form.on('submit(component-form-element)', function (data) {
            var tude = data.field.lonandlat.split(",");
            data.field.longitude = tude[0];
            data.field.latitude = tude[1];
            if (data.field.branchSchoolId == null || data.field.branchSchoolId == "") {
                data.field.parentId = data.field.gatherSchoolId
            } else {
                data.field.parentId = data.field.branchSchoolId
            }
            var index = layer.load(0, {shade: false});
            ax.post({
                type: 'POST',
                url: schoolWebUrl + '/api/register/update',
                contentType: "application/x-www-form-urlencoded",
                data: data.field,
                success: function (r) {
                    layer.alert(r.message);
                    layer.close(index);
                    setTimeout(function () {
                        topFrame.location.reload();
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    },1000)
                },
            });
            return false;
        });

    });
    //关闭弹框

    $('#btnClose').on("click", function () {
        parent.layer.close(parent.layer.getFrameIndex(window.name));
    });

</script>

</html>